<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <!-- <style>
      .Odiv1{width:80px height:80px; background:#aaa; margin:5px}
      .Odiv2{width:50px height: 50px; background : #ccc}
    </style> -->
      <div id="app">
          <button v-on:click="count+=Math.random()">随机数</button>
          <p>自动生成的随机数是{{count}}</p>
          <input type="text" v-on:keyup.enter="submit">
          <div v-on:click="doParent">
            <button v-on:click="doThis">事件冒泡</button>
            <button v-on:click.stop="doThis">阻止事件冒泡</button>
            <a href="https://www.baidu.com" v-on:click.prevent >阻止默认行为</a>
            <a href="https://www.baidu.com">阻止默认行为</a>
          </div>
          <div>
            <button v-on:click="doThis">事件捕获</button>
          </div>
          <div class="Odiv1" v-on:click.self="doParent">a<div class="Odiv2" v-on:click="doThis">b</div></div>
          <div class="Odiv1" v-on:click="doParent">a<div class="Odiv2" v-on:click.self="doThis">b</div></div>
          <hr>
          <button v-on:click.once="doThat">只执行一次</button>
      </div>
      <script>
        var vm=new Vue({
          el: "#app",
          data: {
           count : 0
          },
          methods:{
              submit(){
                  console.log('表格提交')
              },
              doParent(){
                console.log('我是父元素单击事件')
              },
              doThis(){
                console.log('我是被单击元素点击事件')
              },
              doThat(){
                console.log('触发一次')
              }
          }
        })
      </script>
</body>
</html>